<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="shortcut icon" href="../../share/img/logo.png">
		<link rel="stylesheet" href="../../share/css/main.css">
		<script src="../../share/js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../share/js/vue/vue.2.6.14.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../share/js/vue/vue-router.3.6.5.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../share/js/util.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.menu {
				display: flex;
				justify-content: space-around;
				background: #eee;
				padding: 0.5rem;
			}
		</style>
	</head>
	<body>
		<div class="row">
			<div class="col-1">
				<section>
					<h3>路由</h3>
				</section>
			</div>
			<div class="col-1" id="app">
				<section>
					<ul class="list menu">
						<li v-for="item in menu">
							<router-link :to="item.path">{{item.name}}</router-link>
						</li>
					</ul>
					<div>
						<router-view></router-view>
					</div>
				</section>
			</div>
			<div class="col-1">
				<ul id="log" class="d-list mt-10"></ul>
			</div>
		</div>
		<script>
			const menu = [{
				name: "首页",
				path: "/",
				component: {
					template: `<div><h1>首页</h1></div>`
				}
			}, {
				name: "商品",
				path: "/products",
				component: {
					template: `<div><h1>商品</h1></div>`
				}
			}, {
				name: "我的",
				path: "/my",
				component: {
					template: `<div><h1>我的</h1></div>`
				}
			}, {
				name: "关于",
				path: "/about",
				component: {
					template: `<div><h1>关于</h1></div>`
				}
			}];
			const router = new VueRouter({
				routes: menu.map(x => {
					return {
						path: x.path,
						component: x.component
					}
				}),
			});
			const vm = new Vue({
				el: "#app",
				data: {
					menu
				},
				router,
			});
		</script>
	</body>
</html>
